<template>
  <div v-if="info.orderBase">
    <el-steps :active="active" align-center>
      <el-step title="待付款" />
      <el-step title="待发货" />
      <el-step title="已发货" />
      <el-step v-if="active!=5" title="已完成" />
      <el-step v-if="active!=4" title="退货" />
    </el-steps>
    <div>
      订单状态: {{ info.orderBase.status | statusToText }}
    </div>
    <div v-if="active == 2">
      <el-form ref="form" :model="form" label-width="80px" :inline="false" size="normal">
        <el-form-item label="物流公司">

          <el-select v-model="form.deliveryCompany" value-key="" placeholder="" clearable filterable @change="">
            <el-option

              label="顺丰"
              value="顺丰"
            />
            <el-option

              label="韵达"
              value="韵达"
            />
            <el-option

              label="邮政"
              value="邮政"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="form.deliverySn" placeholder="" size="normal" clearable @change="" />

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认发货</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import {
  orderDetail,
  sendDone
} from '@/api/orderManage/order/orderInfo'
export default {
  filters: {
    statusToText(val) {
      var arr = ['待付款', '待发货', '已发货', '已完成', '退货中', '无效订单']
      return arr[val]
    }
  },
  data() {
    return {
      active: 1,
      info: {},
      form: {
        orderId: this.$route.params.id,
        deliverySn: '',
        deliveryCompany: ''
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      orderDetail(this.$route.params.id)
        .then(res => {
          console.log(res)
          this.active = res.data.orderDetail.orderBase.status + 1
          this.info = res.data.orderDetail
        })
    },
    onSubmit() {
      sendDone(this.form)
        .then(res => {
          this.init()
        })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
